<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/bind_phone.css">
    <title>绑定手机号</title>
</head>
<body >
<div class="bind-box">
    <dl class="buf_item">
        <dt>手机号</dt>
        <dd>
            <input type="text" id="phone" placeholder="输入手机号">
        </dd>
        <button class="yzm">获取验证码</button>
    </dl>
    <dl class="buf_item">
        <dt>验证码</dt>
        <dd>
            <input type="text" id="code" placeholder="输入验证码">
        </dd>
    </dl>
</div>

<button class="btn">绑 定</button>

</body>
<script src="__JS__/jquery.min.js"></script>
<script src="__JS__/layer.js"></script>
<script type="text/javascript">
    $('.yzm').click(()=>{
        var phone=$('#phone').val().trim();
        var phoneReg=/^1(3[0-9]|5[189]|8[6789])[0-9]{8}$/;
        if(!phone) {
            layer.msg("请输入手机号", {time: 1500})
        }else if(!phoneReg.test(phone)){
            layer.msg("请输入正确的手机号码", {time: 1500})
        }else{
            //获取验证码
            var time=60;
            var timer=setInterval(()=>{
                time--;
                $('.yzm').html(time+'秒');
                if(time<=0){
                    clearInterval(timer);
                    $('.yzm').html('再次获取');
                }
            },1000);
        }
    })
    $(".btn").click(()=>{
        var phone=$('#phone').val().trim();
        var code=$('#code').val().trim();
        if(!phone){layer.msg("请输入手机号",{time:1500})}
        else if(!code){layer.msg("请输入验证码",{time:1500})}
        else{
            $.ajax({
                type:'post',
                url:'',
                data:{phone:phone,code:code},
                success:function (data){
                    layer.msg("绑定成功",{time:1500});
                    // location.href='index.html'
                },
                error:function () {

                }

            })
        }
    })
</script>
</html>